<template>
  <!-- 右键菜单 -->
  <div class="jsmind_layout">
    <div class="jsmind_toolbar" v-if="showBar">
      <!-- <el-upload
        class="pad"
        :multiple="false"
        ref="upload"
        action="action"
        :before-upload="beforeUpload"
        :http-request="upload">
        <el-button type="primary" size="medium">导入</el-button>
      </el-upload>-->
      <el-button @click="save_nodearray_file" size="medium">保存</el-button>
      <el-button @click="screen_shot" size="medium">下载导图</el-button>
      <el-button @click="get_nodearray_data" size="medium">获取数据</el-button>
      <span class="pad-left">展开：</span>
      <el-select v-model="level" placeholder="展开节点" @change="expand_to_level" class="pad pad-left">
        <el-option
          v-for="item in nodeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <span>主题：</span>
      <el-select v-model="theme" placeholder="选择主题" @change="set_theme">
        <el-option
          v-for="item in themeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div id="jsmind_container" ref="container">
      <div class="zoom_in_out">
        <span>
          <i
            class="zoom-icon el-icon-plus"
            @click="zoomIn"
            :class="isZoomIn === true ? 'disabled' : ''"
          ></i>
        </span>
        <span>
          <i
            class="zoom-icon el-icon-minus"
            @click="zoomOut"
            :class="isZoomOut === true ? 'disabled' : ''"
          ></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>

require("jsmind/js/jsmind.draggable-node.js");

import '@/assets/css/jsmind.css'
// init(jsMind);

import jsMind from 'jsmind/js/jsmind.js'
window.jsMind = jsMind

const { init, reBuild } = require('@/assets/js/jsmind.js')
require('jsmind/js/jsmind.screenshot.js')
init(jsMind)
export default {
  props: {
    showBar: {
      // 是否显示工具栏
      type: Boolean,
      default: true
    },
    isEdit: {
      // 是否启用编辑，启用编辑可以显示右键功能
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      mind: {
        /* 元数据，定义思维导图的名称、作者、版本等信息 */
        meta: {
          name: "思维导图",
          author: "hizzgdev@163.com",
          version: "0.2"
        },
        /* 数据格式声明 */
        format: "node_tree",
        /* 数据内容 */
        data: {
          id: "root",
          topic: "jsMind",
          children: [
            {
              id: "easy", // [必选] ID, 所有节点的ID不应有重复，否则ID重复的结节将被忽略
              topic: "Easy", // [必选] 节点上显示的内容
              direction: "right", // [可选] 节点的方向，此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
              expanded: true, // [可选] 该节点是否是展开状态，默认为 true
              children: [
                { id: "easy1", topic: "Easy to show" },
                { id: "easy2", topic: "Easy to edit" },
                { id: "easy3", topic: "Easy to store" },
                { id: "easy4", topic: "Easy to embed" }
              ]
            },
            {
              id: "open",
              topic: "Open Source",
              direction: "right",
              expanded: true,
              children: [
                { id: "open1", topic: "on GitHub" },
                { id: "open2", topic: "BSD License" }
              ]
            },
            {
              id: "powerful",
              topic: "Powerful",
              direction: "right",
              children: [
                { id: "powerful1", topic: "Base on Javascript" },
                { id: "powerful2", topic: "Base on HTML5" },
                { id: "powerful3", topic: "Depends on you" }
              ]
            },
            {
              id: "other",
              topic: "test node",
              direction: "right",
              children: [
                { id: "other1", topic: "I'm from local variable" },
                { id: "other2", topic: "I can do everything" }
              ]
            }
          ]
        }
      },
      isZoomIn: false,
      isZoomOut: false,
      level: 0,
      nodeOptions: [
        { value: 1, label: "展开到一级节点" },
        { value: 2, label: "展开到二级节点" },
        { value: 3, label: "展开到三级节点" },
        { value: 4, label: "展开到四级节点" },
        { value: 0, label: "展开全部节点" },
        { value: -1, label: "隐藏全部节点" }
      ],
      themeOptions: [
        { value: "default", label: "default" },
        { value: "primary", label: "primary" },
        { value: "warning", label: "warning" },
        { value: "danger", label: "danger" },
        { value: "success", label: "success" },
        { value: "info", label: "info" },
        { value: "greensea", label: "greensea" },
        { value: "nephrite", label: "nephrite" },
        { value: "belizehole", label: "belizehole" },
        { value: "wisteria", label: "wisteria" },
        { value: "asphalt", label: "asphalt" },
        { value: "orange", label: "orange" },
        { value: "pumpkin", label: "pumpkin" },
        { value: "pomegranate", label: "pomegranate" },
        { value: "clouds", label: "clouds" },
        { value: "asbestos", label: "asbestos" }
      ],
      theme: "success"
    };
  },
  created() {},
  mounted() {
    this.getData();
    this.mouseWheel();
  },
  methods: {
    getData() {
      this.open_empty();
    },
    open_empty() {
      const options = {
        container: "jsmind_container", // 必选，容器ID
        editable: this.isEdit, // 可选，是否启用编辑
        theme: this.theme, // 可选，主题
        view: {
          line_width: 2, // 思维导图线条的粗细
          line_color: "skyblue" // 思维导图线条的颜色
        },
        shortcut: {
          enable: false // 禁用快捷键
        },
        mode: "side", // 显示模式，子节点只分布在根节点右侧
        menuOpts: {
          // 这里加入一个专门配置menu的对象
          showMenu: this.isEdit, //showMenu 为 true 则打开右键功能 ，反之关闭
          injectionList: [
            { target: "edit", text: "编辑节点" },
            { target: "delete", text: "删除节点" },
            { target: "addChild", text: "添加子节点" },
            { target: "addBrother", text: "添加兄弟节点" }
          ],
          style: {
            menuItem: {
              "line-height": "28px"
            }
          }
        }
      };
      this.jm = jsMind.show(options, this.mind);
      // 改变窗口大小重置画布
      window.onresize = () => {
        this.jm.resize();
      };
    },
    save_nodearray_file() {
      const mind_data = this.jm.get_data("node_array");
      const mind_name = mind_data.meta.name;
      const mind_str = jsMind.util.json.json2string(mind_data);
      jsMind.util.file.save(mind_str, "text/jsmind", mind_name + ".jm");
    },
    screen_shot() {
      this.jm.screenshot.shootDownload();
    },
    expand_all() {
      this.jm.expand_all();
    },
    collapse_all() {
      this.jm.collapse_all();
    },
    expand_to_level(num) {
      switch (num) {
        case -1:
          this.collapse_all();
          break;
        case 0:
          this.expand_all();
          break;
        default:
          this.jm.expand_to_depth(num);
          break;
      }
    },
    zoomIn() {
      if (this.jm.view.zoomIn()) {
        this.isZoomOut = false;
      } else {
        this.isZoomIn = true;
      }
    },
    zoomOut() {
      if (this.jm.view.zoomOut()) {
        this.isZoomIn = false;
      } else {
        this.isZoomOut = true;
      }
    },
    prompt_info(msg) {
      alert(msg);
    },
    get_nodearray_data() {
      const mind_data = this.jm.get_data("node_array");
      const mind_string = jsMind.util.json.json2string(mind_data);
      this.prompt_info(mind_string);
    },
    set_theme(theme_name) {
      this.jm.set_theme(theme_name);
    },
    scrollFunc(e) {
      e = e || window.event;
      if (e.wheelDelta) {
        if (e.wheelDelta > 0) {
          this.zoomIn();
        } else {
          this.zoomOut();
        }
      } else if (e.detail) {
        if (e.detail > 0) {
          this.zoomIn();
        } else {
          this.zoomOut();
        }
      }
      this.jm.resize();
    },
    // 鼠标滚轮放大缩小
    mouseWheel() {
      if (document.addEventListener) {
        document.addEventListener("domMouseScroll", this.scrollFunc, false);
      }
      this.$refs.container.onmousewheel = this.scrollFunc;
    }
  },
  beforeDestroy() {
    document.removeEventListener("domMouseScroll", this.scrollFunc, false);
  }
};
</script>
<style lang="less" scoped>
.jsmind_layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 40px);
  overflow: hidden;
  .jsmind_toolbar {
    width: 100%;
    padding: 0 10px 10px 10px;
    height: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #f8f9fa;
    box-shadow: 0 0 4px #b8b8b8;
  }
  /deep/ .el-button--medium,
  /deep/ .el-input--medium {
    margin-top: 10px;
  }
  #jsmind_container {
    flex: 1 1 auto;
  }
  /deep/.jsmind-inner {
    overflow: hidden auto !important;
  }
  /deep/.el-upload-list {
    display: none !important;
  }
  /* 隐藏滚动条 */
  .jsmind-inner::-webkit-scrollbar {
    display: none;
  }
  .pad {
    margin-right: 10px;
  }
  .pad-left {
    margin-left: 10px;
  }
  /deep/ jmnode.selected {
    background-color: #b9b9b9;
    color: #fff;
    box-shadow: 2px 2px 8px #777;
  }
  /deep/ jmnode:hover {
    box-shadow: 2px 2px 8px #777;
  }
  .form-con {
    padding-top: 20px;
  }
  .ele-width {
    width: 96%;
  }
}
</style>

